/*
* 苏州海管家物流科技有限公司（https://www.hgj.com/）.
* 苏公网安备32059002003385号 © 2015-2022 Hgj.com All Rights Reserved. | 苏ICP备15030950号.
* @Date: 2022.03.22.
* @Author
* @Description 企点 管理后台 - 标签 组件.
**/
<template>
  <el-dialog :modal="false" title="编辑标签" append-to-body :visible.sync="visible" width="390px" :close-on-click-modal="false">
    <div class="flex justify-between line">
      <span style="line-height: 32px">标签库</span>
      <span class="blue cursor-pointer tag-opt flex" @click="isEdit = !isEdit">
        <img v-if="!isEdit" class="edit-img" src="//filecdn.hgj.com/workbench/new/grey-edit.svg" />
        <i v-else class="el-icon-check" />
        {{ isEdit ? '完成' : '编辑' }}
      </span>
    </div>
    <div class="flex flex-wrap tags-line">
      <el-tag v-for="(item, index) in tags" :key="index" :class="`tag ${calcActiveTag(item) ? 'active-tag' : ''}`" type="info"
              effect="plain" :closable="isEdit" @click="clickTag(item)" @close="clickClose(item)">
        {{ item }}
      </el-tag>
      <!-- 选中、添加 -->
      <el-tag v-if="tags.length < 10" class="tag add-tag" type="info" effect="plain" @click="addTag">
        <i v-if="!isAdd" class="el-icon-plus" />
        <!-- 添加 -->
        <div v-else class="flex input-wrapper">
          <input v-model="addValue" class="input" type="text" :maxlength="10" />
          <i class="el-icon-check" @click="confirmAdd" />
        </div>
      </el-tag>
</div>
    <div class="text-center mt-4">
      <el-button type="primary" style="width: 80px" @click="handleCloseTagsModal">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getUserTags, addUserTags, delUserTags } from '@/api/records'
export default {
    name: 'EditTags',
    components: {},
    props: {},
    data() {
        return {
            tags: [],
            corpId: '', // 公司id
            isAdd: false,
            addValue: '',
            isEdit: false,
            visible: false,
            activeTags: [],
        }
    },
    computed: {},
    watch: {},
    mounted() {},
    methods: {
        async showDialog(item) {
            this.activeTags = JSON.parse(JSON.stringify(item))
            this.getTagList()
            this.visible = true
        },
        /**
        *@Description 获取 标签列表.
        *@Return .
       **/
        async getTagList() {
            let res = await getUserTags()
            this.tags = res.data
            console.log(this.tags)
        },
        /**
        *@Description 标签选择 与否 操作.
        *@Return .
       **/
        calcActiveTag(item) {
            if (this.isEdit) return false
            return this.activeTags.findIndex((i) => i === item) > -1
        },
        addTag() {
            this.isAdd = true
        },
        /**
        *@Description 标签 点击事件.
        *@Return .
       **/
        clickTag(item) {
            const index = this.activeTags.findIndex((i) => i === item)
            if (index > -1) {
                this.activeTags.splice(index, 1)
            } else {
                this.activeTags.push(item)
            }
        },
        /**
        *@Description 标签 删除事件.
        *@Return .
       **/
        async clickClose(item) {
            console.log(item)
            if (this.tags.length < 2) {
                return this.$message.warning('至少保留一个标签')
            }
            await delUserTags({ corpId: this.corpId, tag: item })
            const index = this.activeTags.findIndex((i) => i === item)
            if (index > -1) {
                this.activeTags.splice(index, 1)
            }
            this.getTagList()
        },
        /**
        *@Description 标签 新增事件.
        *@Return .
       **/
        async confirmAdd() {
            if (!this.addValue) {
                this.isAdd = false
                return
            }
            if (this.tags.findIndex((item) => item == this.addValue) > -1) {
                return this.$message.warning('标签已存在')
            }
            if (this.addValue) {
                await addUserTags({ corpId: this.corpId, tag: this.addValue })
            }
            this.addValue = ''
            this.isAdd = false
            setTimeout(() => {
                this.getTagList()
            }, 500)
        },
        /**
        *@Description 新增标签 确定事件.
        *@Return .
       **/
        handleCloseTagsModal() {
            this.$emit('ok', this.activeTags)
            this.visible = false
            this.addValue = ''
            this.activeTags = []
            this.isAdd = false
            this.isEdit = false
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep {
    .el-dialog__body {
        padding-top: 16px;
        user-select: none;
    }
}
.tag-opt {
    padding: 4px 6px;
    border-radius: 2px;
    line-height: 24px;
    &:hover {
        background: #e5f0ff;
    }
    .el-icon-check {
        margin: auto 4px auto 0;
    }
    .edit-img {
        margin: auto 4px auto 0;
        width: 12px;
        height: 12px;
        filter: brightness(0) saturate(100%) invert(27%) sepia(53%) saturate(6856%) hue-rotate(211deg) brightness(106%) contrast(103%);
    }
}
.active-tag {
    background: #d4e6ff;
    color: #006aff;
    border: 1px solid #006aff;
}
.add-tag {
    width: 90px;
    text-align: center;
    .input-wrapper {
        padding-bottom: 10px;
    }
    .el-icon-check {
        line-height: 22px;
        position: relative;
        left: 4px;
    }
    .input {
        width: 60px;
        height: 18px;
        border-bottom: 1px solid #a1abc2;
    }
}
.tag {
    margin: 0 10px 10px 0;
    cursor: pointer;
    &:hover {
        color: #006aff;
        border-color: #006aff;
    }
}
.line {
    font-size: 13px;
}
.tags-line {
    margin: 10px 0;
}
.blue {
    color: #006aff;
}
</style>
